<template>
  <div class="box-div" :style="this.style">
    <div class="webBox">
      <div class="webO">{{ this.titleName }}</div>
      <div class="webT">{{ this.value }}</div>
    </div>
  </div>
</template>

<script>
import {
  orderCountAll,
  orderCountOneDay,
  orderCountForNotComplete,
  orderCountForComplete,
  getBlockNum,
  getNodeStatusList
} from '@/api/statistics/boxCard'
export default {
  props: {
    type: {
      type: String,
      required: true
    }
  },
  data(){
    return {
      titleName:'',
      value:0,
      style:{}
    }
  },
  mounted() {
    if(this.type === '1'){
      orderCountAll().then(res=>{
        console.log(res)
        this.titleName = '累计订单数量:'
        this.value = res.data.result;
        this.style = {background: 'linear-gradient(180deg, rgba(30, 198, 149, 1) 0%, rgba(30, 198, 149, 1) 0%, rgba(51, 204, 204, 1) 100%, rgba(51, 204, 204, 1) 100%)'}
      })
    } else if(this.type === '2'){
      orderCountOneDay().then(res=>{
        this.titleName = '今日订单总数量:'
        this.value = res.data.result;
        this.style = {background: 'linear-gradient(90deg, rgba(244, 174, 149, 1) 0%, rgba(244, 174, 149, 1) 0%, rgba(226, 113, 140, 1) 100%, rgba(226, 113, 140, 1) 100%)'}
      })
    } else if(this.type === '3'){
      orderCountForNotComplete().then(res=>{
        this.titleName = '今日完成订单数量:'
        this.value = res.data.result;
        this.style = {background: 'linear-gradient(180deg, rgba(255, 153, 51, 1) 0%, rgba(255, 153, 51, 1) 0%, rgba(239, 203, 45, 1) 100%, rgba(239, 203, 45, 1) 100%)'}
      })
    } else if(this.type === '4'){
      getBlockNum().then(res=>{
        this.titleName = '当前区块高度:'
        this.value = res.data.result;
        this.style = {background: 'linear-gradient(180deg, rgba(45, 169, 250, 1) 0%, rgba(45, 169, 250, 1) 0%, rgba(102, 204, 255, 1) 100%, rgba(102, 204, 255, 1) 100%)'}
      })
      // orderCountForComplete().then(res=>{
      //   this.titleName = '进入未完成订单数量:'
      //   this.value = res.data.result;
      //   this.style = {background: 'linear-gradient(180deg, rgba(45, 169, 250, 1) 0%, rgba(45, 169, 250, 1) 0%, rgba(102, 204, 255, 1) 100%, rgba(102, 204, 255, 1) 100%)'}
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.box-div{
  height: 120px;
  padding: 35px;
  margin: 20px;
}
.webBox{
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.webO{
  display: -webkit-box;
  -webkit-box-pack: start;
  -webkit-box-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.webT{
  display: -webkit-box;
  -webkit-box-pack: end;
  -webkit-box-align: center;
  font-size: 20px;
  font-weight: 700;
  padding-right: 50px;
  padding-top: 10px;
  color: #fff;
}

</style>
